<template>
	<z-paging @pageScroll="pageScroll">
		<view class="header_box">
			<view class="biaoti_box">
				<view class="left_icon_box" @click="back">
					<image src="https://www.dingxians.cn/upload/20250324/67e13c80ecef6.png" mode="scaleToFill" />
				</view>
				<view class="center_biaoti_box">
					流水排行
				</view>
				<view class="left_icon_box">
					<!-- 占位 -->
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="swiper_box">
			<!-- 选项卡 -->
			<view class="tabs_box flex_center">
				<view class="dange_tab_box" :class="tabId == item.id ? '' : 'dange_tab_box1'" @click="tabBtn(item)"
					:style="{ backgroundImage: `url(${tabId == item.id ? item.selimgUrl : item.imgUrl})` }"
					v-for="(item, index) in tabsList" :key="index">
					{{ item.text }}
				</view>
			</view>
		</view>
		<template v-if="phlist.length > 0">
			<view class="paihangqu_box" v-for="(item, index) in phlist" :key="index">
				<view class="left_box">

					<view class="touxiang_box">

						<view class="id_box">
							{{item.num}}
						</view>
						<image :src="item.avatar" mode="scaleToFill" />
						<view class="biao">
							<!-- <image v-if="index == 0" src="https://kimi.dingxians.cn/upload/static/flow/1.png" mode="scaleToFill" />
                                <image v-if="index == 1" src="https://kimi.dingxians.cn/upload/static/flow/2.png" mode="scaleToFill" />
                                <image v-if="index == 2" src="https://kimi.dingxians.cn/upload/static/flow/3.png" mode="scaleToFill" /> -->
						</view>
					</view>
					<view class="name_id_box">
						<view class="t_box slh">{{ item.nickname }}</view>
						<view class="b_box">ID:{{ item.user_id }}</view>
					</view>
				</view>
				<view class="right"
					:style="{ color: (index == 0 ? '#F9A744' : index == 1 ? '#98B0BC' : index == 1 ? '#EE8055' : '#ffffff') }">
					{{ item.total_pay }}
				</view>
			</view>
		</template>

		<empty v-else />
	</z-paging>
</template>

<script>
	import api from '../../../api/index.js'
	export default {
		components: {},
		data() {
			return {
				swiperList: [ //轮播
					{
						image: "https://morgan.dingxians.cn/upload/20241219/67638bb7413a8.png"
					},
				],
				tabsList: [ //选项卡list
					{
						id: 5,
						imgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814af30.png',
						selimgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814f6bd.png',
						text: '月总流水'
					},
					{
						id: 1,
						imgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814af30.png',
						selimgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814f6bd.png',
						text: '日总流水'
					},
					{
						id: 2,
						imgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814af30.png',
						selimgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814f6bd.png',
						text: '周总流水'
					},{
						id: 6,
						imgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814af30.png',
						selimgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814f6bd.png',
						text: '周擂台总流水'
					},
					{
						id: 3,
						imgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814af30.png',
						selimgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814f6bd.png',
						text: '当日无限'
					},
					{
						id: 4,
						imgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814af30.png',
						selimgUrl: 'https://www.dingxians.cn/upload/20250509/681da3814f6bd.png',
						text: '当日擂台'
					},
				],
				tabId: 5, //默认无限赏
				phlist: [], //流水列表
			};
		},

		onLoad() {},
		onShow() {
			this.streamRanks()
		},
		methods: {
			// 监听滚动高度
			pageScroll(event) {
				uni.$emit("onPageScroll", event.detail.scrollTop)
			},
			// 选项卡切换
			tabBtn(item) {
				this.tabId = item.id
				this.streamRanks()
			},
			streamRanks() {
				let data = {
					type: this.tabId
				}
				api.users
					.streamRanks(data)
					.then((res) => {
						if (res.code == 200) {
							this.phlist = res.data
						}
					})
			}
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep.zp-scroll-view-absolute {
		background-image: none !important;
		background-color: #000 !important;
	}

	.header_box {
		width: 750rpx;
		height: 180rpx;
		box-sizing: border-box;
		padding-top: 92rpx;
		margin-bottom: 20rpx;


		.biaoti_box {
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.left_icon_box {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.center_biaoti_box {
				width: 380rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 40rpx;
				color: #fff;
				font-weight: 900;
			}
		}
	}

	.swiper_box {
		width: 750rpx;
		height: 100rpx;

		position: relative;

		.tabs_box {
			position: absolute;
			bottom: 50rpx;
			width: 100%;
			height: 63rpx;
			overflow: hidden;
			overflow-x: auto;
			box-sizing: border-box;
			padding: 0 30rpx;
			display: flex;
			justify-content: flex-start;
			overflow:hidden;
			overflow-x: auto;

			.dange_tab_box {
				min-width: 172rpx;
				height: 63rpx;
				background-size: 100% 100%;
				font-family: Source Han Serif CN;
				font-weight: 800;
				font-size: 30rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
				flex-shrink: 0;
				color: #FFFFFF;
				text-align: center;
				line-height: 50rpx;

				&.dange_tab_box1 {
					color: rgba(151, 188, 193, .5);
				}
			}
		}
	}

	.paihangqu_box {
		width: 690rpx;
		height: 120rpx;
		border-bottom: 1rpx solid rgba(255, 255, 255, .2);
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left_box {
			height: 100%;
			display: flex;
			justify-content: flex-start;

			.touxiang_box {
				width: 116rpx;
				height: 116rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				image {
					width: 65rpx;
					height: 65rpx;
					border-radius: 50%;
				}

				.id_box {
					height: 100%;
					line-height: 120rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					font-size: 28rpx;
					color: #DED000;
					margin-right: 18rpx;
				}

				.biao {
					width: 74rpx;
					height: 47rpx;
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					bottom: 4rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.name_id_box {
				width: 200rpx;
				height: 100%;
				box-sizing: border-box;

				.t_box {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.b_box {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #CCCCCC;
				}
			}
		}

		.right {
			height: 120rpx;
			line-height: 120rpx;
			font-family: FZZongYi-M05S;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
</style>